<template>
<div class="recommend-div">
    <div class="recommend-title">热销推荐</div>
    <ul>
        <!-- border-bottom 一像素边框解决方案 -->
        <router-link tag='li' :to="'/Dentail/'+item.id" class="item border-bottom" v-for="(item,index) of this.list" :key=index>
            <img class="item-img" :src='item.imgUrl' alt="">
            <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{item.desc}}</p>
                <button class="item-button">查看详情</button>
            </div>
        </router-link>
    </ul>
</div>
</template>
<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.recommend-div
    margin-top : .2rem
    .recommend-title
        color : $titleColor
        font-size .3rem
        background : #eee
        text-indent .1rem
        line-height .8rem
    .item
        display : flex //容器显示方式
        height : 1.9rem
        overflow hidden
        .item-img
            width 1.7rem
            height 1.7rem
            padding : .1rem //距离上下左右距离
        .item-info
            flex 1 //自动撑开宽度
            padding .1rem
            min-width 0 //宽度超出设置
            .item-title
                color : black
                line-height : .5rem
                font-size .35rem
                ellipsis() //宽度超过之后。。。
            .item-desc
                color : #aaa
                line-height : .4rem
                font-size .30rem
                ellipsis() //宽度超过之后。。。
            .item-button
                color : #fff
                background #ffaa32
                line-height : .44rem
                font-size .27rem
                padding-left .1rem
                padding-right .1rem
                border-radius .1rem
                margin-top .3rem
</style>
